<template name="paymentSettings">
  <div class="panel-group" id="paymentSettingsAccordian" role="tablist" aria-multiselectable="true">
    <div class="panel panel-default">
      <div class="panel-heading">
        <div class="panel-title">
          <a
            href="#payment-methods"
            aria-controls="paymentMethods"
            role="button"
            data-toggle="collapse"
            data-parent="#paymentSettingsAccordian"
            data-i18n="admin.paymentSettings.paymentMethod">Default Method</a>
        </div>
      </div>
      <div id="payment-methods" class="panel-collapse collapse in" role="tabpanel" aria-labelledby="paymentMethods">
        <div class="panel-body">
          {{#autoForm collection=Collections.Shops doc=shop id="shopEditPaymentMethodsForm" type="update"
          autosave=true}}
            {{> afQuickField name='defaultPaymentMethod' options=paymentMethodOptions}}
          {{/autoForm}}
        </div>
      </div>
    </div>

    {{> discountsPaymentSettings}}

    {{#each paymentPlugins}}
    <div class="panel panel-default">
      <div class="panel-heading panel-heading-flex">
        <div class="panel-title">
          <i class="fa fa-{{name}}"></i>
          <span data-i18n="{{i18nKeyLabel}}">{{label}}</span>
        </div>
      </div>
      <div class="panel-body">
        <label><span data-i18n="shopSettings.paymentMethods">Payment methods</span></label>
        <div class="rui list-group">
          {{#each paymentMethodsForPlugin}}
            <div class="rui list-group-item" role="button" tabindex={{@index}}>
              <div class="rui list-item-content">
                <span>{{displayName}}</span>
              </div>
              <div class="rui list-item-action">
                <span><label class="rui switch"><input name="paymentMethodEnabled" type="checkbox"><div class="switch-control {{#if isEnabled}}active{{/if}}"></div></label></span>
              </div>
            </div>
          {{/each}}
        </div>
        <div>
          {{> React component=ReactComponentOrBlazeTemplate name=template props=.}}
        </div>
      </div>
    </div>
    {{/each}}
  </div>
</template>

<template name="discountsPaymentSettings">
  {{#each reactionApps packageName='discount-codes' provides='paymentSettings'}}
  <div class="panel panel-default">
    <div class="panel-heading panel-heading-flex">
      <div class="panel-title">
        <i class="fa fa-{{name}}"></i>
        <span data-i18n="{{i18nKeyLabel}}">{{label}}</span>
      </div>
      <div class="panel-controls">
        <input class="checkbox-switch" type="checkbox" name="enabled" {{checked enabled}}>
      </div>
    </div>
    <div class="panel-body {{shown enabled}}">
      {{> React component=ReactComponentOrBlazeTemplate name=template props=.}}
    </div>
  </div>
  {{/each}}
</template>
